<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" @close="onCancel">
		<el-table :data="tableList" border>
			<el-table-column type="selection" width="40" align="center" />
			<el-table-column label="规格属性" align="center">
				<template #default="scope">
					{{ scope.row.skus.map(item => item.v).join('_') }}
				</template>
			</el-table-column>
			<el-table-column label="图片" align="center">
				<template #default="scope">
					<el-image v-if="scope.row.icon" :src="scope.row.icon_show" fit="scale-down" style="width: 50px; height: 50px" />
				</template>
			</el-table-column>
			<el-table-column label="库存" prop="stock" align="center" />
			<el-table-column label="原价" prop="old_price" align="center" />
			<el-table-column label="成本价" prop="cost_price" align="center" />
			<el-table-column label="售价" prop="sale_price" align="center" />
			<el-table-column label="管家佣金" prop="sale_price_member" align="center" />
			<el-table-column label="经理佣金" prop="sale_price_member1" align="center" />
			<el-table-column label="操作" align="center" fixed="right">
				<template #default="{ row }">
					<el-button @click="onStockEdit(row)" type="text">修改库存</el-button>
				</template>
			</el-table-column>
		</el-table>
		<good-stock-edit-dialog ref="goodStockEditRef" />
	</el-dialog>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { goodsSelectSku } from '/@/api/admin1';
import GoodStockEditDialog from './GoodStockEditDialog.vue';

export default {
	name: 'goodStockDialog',
	components: { GoodStockEditDialog },
	setup() {
		const state = reactive({
			title: '商品库存查看',
			open: false,
			single: true, // 非单个禁用
			tableList: [],
		});

		const goodStockEditRef = ref(null);

		let callback: Function = () => {};
		let goods_id = 0;

		/********** 点击事件(on开头) **********/
		// 取消按钮
		const onCancel = () => {
			state.open = false;
			callback();
		};
		// 修改库存
		const onStockEdit = (row: any) => {
			(goodStockEditRef.value as any)?.openDialog(
				{
					data: {
						option_id: row.id,
						stock: row.stock,
						goods_id: goods_id,
					},
				},
				() => _goodsSelectSku({ goods_id })
			);
		};
		/********** 方法事件 **********/
		/********** 网络事件 **********/
		// 查询商品详情 - sku
		const _goodsSelectSku = (_data: object) => {
			goodsSelectSku(_data).then((res: any) => {
				console.log('查询商品详情 - sku', res);
				state.tableList = res.data.info.specifications_val;
			});
		};
		//打开
		const openDialog = (config: any, fn: Function) => {
			console.log(config);
			callback = fn;
			goods_id = config.data.goods_id;
			state.title = `商品「${config.title}」库存查看`;
			state.open = true;
			_goodsSelectSku(config.data);
		};

		return {
			goodStockEditRef,
			onCancel,
			onStockEdit,
			openDialog,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
